<template>
    <h3>系统设置</h3>
    <div class="set_form">
        <div class="opt">
            <el-input v-model="topColor" style="width: 360px; height: 44px; font-size: 16px" placeholder="上方背景颜色" />
        </div>
        <div class="opt">
            <el-input v-model="leftColor" style="width: 360px; height: 44px; font-size: 16px" placeholder="左侧背景颜色" />
        </div>
        <div class="opt">
            <el-input v-model="rightColor" style="width: 360px; height: 44px; font-size: 16px" placeholder="右侧背景颜色" />
        </div>
        <div class="opt">
            <el-button @click="setFn" type="primary" size="large">更改公共设置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    let topColor = ref('');
    let leftColor = ref('');
    let rightColor = ref('');

    const setFn = ()=>{
        localStorage.setItem("topColor",topColor.value);
        localStorage.setItem("leftColor",leftColor.value);
        localStorage.setItem("rightColor",rightColor.value);
    }
</script>

<style lang="scss">
    @import '../common/scss/variable.scss';
    $bgColor: var(bgColor1);
    .set_form {
      .opt {
           margin-top: 15px;
        }
    }

</style>